<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/tld/eatrip.tld" prefix="eatrip" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
		<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script> 
		<link rel="stylesheet" media="screen" type="text/css" href="../css/redmond/jquery-ui-1.8.16.custom.css" />
		<link rel="stylesheet" media="screen" type="text/css" href="../css/locale.css" />
		<link rel="stylesheet" media="screen" type="text/css" href="../css/footer.css" />
		<title>Locale</title>
	</head>
	<body>
		<header>
			<h1>Header</h1>
			<tiles:insertAttribute name="navmenu" />
		</header>
		<div id="container">
			<div id="left-container">
				 <div id="tabs">
                    <ul>
                        <li><a href="#descrizione-locale">Descrizione</a></li>
                        <li><a href="#dettagli-locale">Dettagli</a></li>
                        <li><a href="#contatti-locale">Contatti</a></li>
                    </ul>
                    <div id="descrizione-locale">
                        <label id="descrizione"><c:out value="${locale.descrizione}"></c:out></label>
                    </div>
                    <div id="dettagli-locale">
                        <eatrip:locale locale="${locale}" path="null" dimensioneDettagli="15" foto="false" basePathImage="../" dati="false"/>
                    </div>
                    <div id="contatti-locale">
                        <eatrip:locale locale="${locale}" path="null" miniDettagli="true"/>
                    </div>
                </div>
			</div>
			<div id="right-container">
				<div id="foto-locale">
					<eatrip:locale locale="${locale}" path="null" onlyFoto="true" basePathImage="../"/>
					<!-- 
					<img alt="foto1" src="images/no-photo-1.jpg">
    				<img alt="foto2" src="images/no-photo-2.jpg">
    				<span id="spazio-foto"></span>
    				<img alt="foto3" src="images/no-photo-2.jpg">
    				 -->	
				</div>
			</div>
			<div id="center-container">
				<div id="ricetta">
					<c:forEach var="ricetta" items="${locale.ricetta}">
						<eatrip:ricetta ricette="${ricetta}" />
					</c:forEach>
				</div>
				<div id="commenti"><h2>Commenti</h2></div>
			</div>
			<tiles:insertAttribute name="footer" />
		</div>
		<script type="text/javascript">
			$(function(){
				$("#tabs").tabs();
			}); 	
		</script>
	</body>
</html>